<template>
  <div>
    <div v-for="(dataset, index) in datasets" :id="'chart' + (index + 1)" :key="dataset.crmdatamining_id" style="width: 100%; height: 500px; margin-bottom: 20px;" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { GetStatics } from '@/api/crm/crmdatamingentry'

export default {
  name: 'DataMiningCharts',
  data() {
    return {
      datasets: []
    }
  },
  mounted() {
    this.handleGetStatics()
    window.addEventListener('resize', this.resizeCharts)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCharts)
  },
  methods: {
    async handleGetStatics() {
      try {
        const response = await GetStatics({})
        this.datasets = response.data
        this.$nextTick(() => {
          this.drawCharts()
        })
      } catch (error) {
        console.error('Failed to fetch data', error)
      }
    },
    drawCharts() {
      this.datasets.forEach((dataset, index) => {
        const chartId = 'chart' + (index + 1)
        var chartDom = document.getElementById(chartId)
        if (chartDom) {
          var myChart = echarts.init(chartDom)
          var option

          // 使用所有星级的数据,过滤掉-1的数据
          const allStats = dataset.stats.filter(stat => stat.star !== -1)

          option = {
            title: {
              text: `${dataset.subject} (未处理:${dataset.total_unprocessed} 已处理:${dataset.total_processed})`,
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              data: ['Processed', 'Unprocessed'],
              bottom: '10px'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '15%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: allStats.map(stat => stat.star)
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: 'Processed',
                type: 'bar',
                stack: 'total',
                data: allStats.map(stat => stat.processed_count),
                itemStyle: {
                  color: 'green'
                }
              },
              {
                name: 'Unprocessed',
                type: 'bar',
                stack: 'total',
                data: allStats.map(stat => stat.unprocessed_count),
                itemStyle: {
                  color: 'red'
                }
              }
            ]
          }

          option && myChart.setOption(option)
        }
      })
    },
    resizeCharts() {
      this.datasets.forEach((dataset, index) => {
        const chartId = 'chart' + (index + 1)
        var chartDom = document.getElementById(chartId)
        if (chartDom) {
          var myChart = echarts.getInstanceByDom(chartDom)
          if (myChart) {
            myChart.resize()
          }
        }
      })
    }
  }
}
</script>

<style scoped>
#chart {
  width: 100%;
  height: 500px;
  margin-bottom: 20px;
}
</style>
